<!-- 汇报关系右侧组件 -->
<script lang="tsx">
import type { treeDataType } from '../../type';
import { GetHumanRosterDetail } from '@/apis/management/human/humanRoster';
import { IconUser } from '@arco-design/web-vue/es/icon';
import { useRouter } from 'vue-router';

export default defineComponent({
  props: ['data'],
  setup(props: { data: treeDataType }, context) {
    watch(
      () => props.data,
      (val) => {
        originTreeData.data = val;
      }
    );
    const router = useRouter();

    const container = ref<any>();
    const originTreeData = reactive<{ data: treeDataType }>({ data: {} });
    const Node = ref();
    const proportion = ref(1);
    const avatar = ref(32);
    const initStyle = reactive({
      width: 250,
      height: 100,
      lineHeight: 44
    });
    const move = () => {
      const container: any = document.getElementsByClassName('container');
      let flag: boolean;
      let downX: number;
      let downY: number;
      let scrollLeft: number;
      let scrollTop: number;

      Node.value.addEventListener(
        'mousedown',
        function (this: any, event: any) {
          const _this = this;
          container[0].style.cursor = 'grabbing';
          flag = true;
          downX = event.clientX; // 获取到点击的x下标
          downY = event.clientY; // 获取到点击的x下标
          scrollLeft = _this.scrollLeft; // 获取当前元素滚动条的偏移量
          scrollTop = _this.scrollTop; // 获取当前元素滚动条的偏移量
        }
      );

      Node.value.addEventListener(
        'mousemove',
        function (this: any, event: any) {
          if (flag) {
            const _this = this;
            // 判断是否是鼠标按下滚动元素区域
            var moveX = event.clientX; // 获取移动的x轴
            var moveY = event.clientY; // 获取移动的x轴
            var scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
            var scrollY = moveY - downY; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
            _this.scrollLeft = scrollLeft - scrollX; // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
            _this.scrollTop = scrollTop - scrollY; // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
          }
        }
      );
      // 鼠标抬起停止拖动
      Node.value.addEventListener('mouseup', function () {
        container[0].style.cursor = 'grab';
        flag = false;
      });
      // 鼠标离开元素停止拖动
      Node.value.addEventListener('mouseleave', function (event: any) {
        flag = false;
      });
    };
    const go = (id: number) => {
      router.push({
        name: 'HumanRosterDetail',
        query: {
          id
        }
      });
    };
    const getDetails = async (id: number, data: any) => {
      if (data?.personnelData) return;
      const res: any = await GetHumanRosterDetail({ id });
      data.personnelData = {};
      res?.forEach((ele: any) => {
        if (ele.code === 'CDC80FC12D1DE43018D098E8322D0F966') {
          data.personnelData.JobNumber = ele.value;
        }
        if (ele.code === 'C5B3625070EFD4698A20925CE32B31F16') {
          data.personnelData.rank = ele.value;
        }
        if (ele.code === 'CC3B7E3812CB74CEBAA2E57AF927F8189') {
          data.personnelData.company = ele.value;
        }
        if (ele.code === 'C2CB71FCF495347F896C7802ED9594BCA') {
          data.personnelData.department = ele.value;
        }
        if (ele.code === 'C4CBDEC96F74344FD8CED137416BD1D3D') {
          data.personnelData.startDate = ele.value;
        }
        if (ele.code === 'C3384BE6E60C341D68B8180DA04A1C4E1') {
          data.personnelData.phoneNumber = ele.value;
        }
        if (ele.code === 'C3384BE6E60C341D68B8180DA04A1C4E1') {
          data.personnelData.telephone = ele.value;
        }
        if (ele.code === 'C612A1730AFBF44F8B16A5B681F5B5B86') {
          data.personnelData.workType = ele.value;
        }
        if (ele.code === 'CE009C2E2B542409D815F0D3D54FE0E2B') {
          data.personnelData.workLocation = ele.value;
        }
      });
    };
    // 放大
    const enlarge = () => {
      proportion.value += 0.05;
    };
    // 缩小
    const shrink = () => {
      if (proportion.value > 0) proportion.value -= 0.05;
    };
    nextTick(() => {
      move();
    });
    // 节点渲染
    const renderNode = (data: any, top = true) => {
      // const topStyle = {
      //   width: !top ? container.value?.scrollWidth + 'px' : '100%'
      // };
      return (
        <>
          <div class="render">
            <div class="head-line" style={`height: ${initStyle.lineHeight}px`}>
              <div class={{ 'bon-line': top }}></div>
            </div>

            <div class="vertical-main">
              <div style="position: relative;height: 100%;">
                <div class="duty-mian" style="position: relative;height: 100%;">
                  {/* <div class="title">部门负责人信息</div>
                  <div class="user">
                    <div class="left">
                      <a-avatar size={avatar.value}>
                        <IconUser />
                      </a-avatar>
                      <div>
                        <p>{data.name}</p>
                        <p>{data?.position || '经理'}</p>
                      </div>
                    </div>
                    <div class="right">
                      <p>司龄</p>
                      <p>{data?.personnelData?.Siling || 1}</p>
                    </div>
                  </div> */}
                  {/* <div class="information">
                    <div>
                      <p>工号：</p>
                      <p>{data?.personnelData?.JobNumber || 'LY-00001'}</p>
                    </div>{' '}
                    <div>
                      <p>职级：</p>
                      <p>{data?.personnelData?.rank || '1'}</p>
                    </div>
                  </div>
                  <div class="information">
                    <div>
                      <p>所属公司：</p>
                      <p>{data?.personnelData?.company || '领壹集团'}</p>
                    </div>{' '}
                    <div>
                      <p>所属部门：</p>
                      <p>{data?.personnelData?.department || '生产部'}</p>
                    </div>
                  </div>
                  <div class="information">
                    <div>
                      <p>入职日期：</p>
                      <p>{data?.personnelData?.startDate || '2023-02-16'}</p>
                    </div>{' '}
                    <div>
                      <p>手机号码：</p>
                      <p>{data?.personnelData?.phoneNumber || '19163766962'}</p>
                    </div>
                  </div>
                  <div class="information">
                    <div>
                      <p>工作电话：</p>
                      <p>{data?.personnelData?.telephone || '82277822'}</p>
                    </div>{' '}
                    <div>
                      <p>工作邮箱：</p>
                      <p>
                        {data?.personnelData?.mailbox || '1447895248@qq.com'}
                      </p>
                    </div>
                  </div>
                  <div class="information">
                    <div>
                      <p>员工类型：</p>
                      <p>{data?.personnelData?.workType || '全职'}</p>
                    </div>{' '}
                    <div>
                      <p>工作地点：</p>
                      <p>{data?.personnelData?.workLocation || '广州市'}</p>
                    </div>
                  </div> */}
                </div>
              </div>
              <div class="point">
                <span></span>
                <span></span>
                <span></span>
              </div>
              <div class="top">
                <a-avatar
                  imageUrl={data.headPortrait}
                  onClick={() => go(data.id as number)}
                  style={{ backgroundColor: '#b8d4ff', cursor: 'pointer' }}
                  size={60}
                >
                  <IconUser />
                </a-avatar>
                <div class="text">
                  <p>{data.name || '佚名'}</p>
                  <p>{data.positionName || '经理'}</p>
                  <p>{data.jobNumber || 'LY123456'}</p>
                </div>
              </div>
            </div>
            <div
              class="bottom-line"
              style={{ height: initStyle.lineHeight + 'px' }}
            >
              <div class={{ 'top-line': data.reportingRelationship }}></div>
            </div>
          </div>
        </>
      );
    };
    // 页面渲染
    const renderView = (
      data: any,
      type: 'top' | 'last' | 'first' | 'middle' | 'only'
    ) => {
      if (!data) return null;
      const style: any = {
        'border-top': ' 1px solid #d7d7d7',
        width: '50%'
      };

      const children: any = {
        transform: `scale(${proportion.value})`,
        width: type === 'top' ? container.value?.scrollWidth + 'px' : '100%',
        display: 'flex',
        'flex-direction': 'column',
        ' align-items': 'center'
      };
      return (
        <div
          key={data.id}
          class="children"
          style={type === 'top' ? children : { width: '100%' }}
        >
          <div style=" display:flex;position: relative;width: 100%;">
            <div
              style={
                type === 'last' || type === 'middle' ? style : { width: '50%' }
              }
            ></div>
            <div
              style={
                type === 'first' || type === 'middle' ? style : { width: '50%' }
              }
            ></div>
          </div>
          {renderNode(data, type === 'top' ? false : true)}
          {data.reportingRelationship ? (
            <div style="display:flex;" ref={type === 'top' ? container : null}>
              {data.reportingRelationship.map(
                (ele: treeDataType, index: number) => {
                  return renderView(
                    ele,
                    changeChildrenShow(index, data.reportingRelationship.length)
                  );
                }
              )}
            </div>
          ) : null}
        </div>
      );
    };
    // 处理子集显示状态
    const changeChildrenShow = (index: number, length: number) => {
      if (length === 1) return 'only';
      if (!index) return 'first';
      if (length === index + 1) return 'last';
      return 'middle';
    };
    context.expose({ enlarge, shrink });
    return () => (
      <div class="container" ref={Node}>
        {/* <div class="icons">
          <div class="icon">
            <IconFont type="icon-23fangda" size="22" onClick={enlarge} />
          </div>

          <div class="icon">
            <IconFont type="icon-24suoxiao" size="22" onClick={shrink} />
          </div>
        </div> */}
        {!originTreeData.data?.id ? (
          <>
            <a-empty />
          </>
        ) : (
          <>{renderView(originTreeData.data, 'top')}</>
        )}
      </div>
    );
  }
});
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  position: relative;
  background-color: #f3f8fe;
  overflow: auto;
  cursor: grab;
  .icons {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 145px;
    z-index: 999999;
    left: 1650px;
    padding: 20px;
    color: #4a86ff;
    p {
      padding: 0 10px;
      margin: 0;
    }
    div {
      margin-right: 10px;
    }
    div:nth-child(4) {
      margin-right: 0px;
    }
    .icon {
      cursor: pointer;
      padding: 5px;
      border: 1px solid #4a86ff;
    }
  }
}
.render {
  position: relative;
  padding: 0 10px;

  .vertical-main {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    width: 125px;
    min-height: 200px;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    // border: 1px solid #3d7eff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
    // background-color: #fff;
    // width: 250px;
    // height: 100px;
    border-radius: 5px;
    p {
      padding: 0;
      margin: 0;
      word-wrap: break-word;
    }
    .top {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
        border-top-left-radius: 8px;
        width: 50px;
        background-color: #3d7eff;
        p {
          color: #fff;
          width: 16px;
          font-size: 16px;
          margin: 5px auto;
          line-height: 24px;
          text-align: center;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        padding: 10px;
        .text {
          display: flex;
          margin-top: 10px;
          p {
            width: 16px;
            font-size: 16px;
            text-align: center;
          }
          p:nth-child(1) {
            color: #3d7eff;
            margin-right: 10px;
          }
          p:nth-child(2) {
            color: #cccccc;
          }
        }
      }
      .text {
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
          margin-top: 10px;
          font-size: 16px;
          color: #4a4a4a;
          // font-size: 20px;
        }
        p:nth-child(2) {
          background-color: #eef4ff;
          padding: 5px 10px;
          border-radius: 5px;
          color: #508aff;
        }
      }
    }
    .point {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      background: #eef4ff;
      justify-content: space-around;
      width: 25px;
      border-radius: 5px;
      padding: 3px;
      span {
        display: block;
        width: 5px;
        height: 5px;
        background-color: #3d7eff;
        border-radius: 50%;
      }
    }
    .bottom {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      flex: 1;
      padding: 5px 5px;
      color: #666666;
      text {
        color: #3d7eff;
      }
    }
  }
  .main {
    // z-index: 9;
    margin: 0 auto;
    position: relative;
    // background-color: #fff;
    // width: 250px;
    // height: 100px;
    border-radius: 25px;
    cursor: pointer;
    // cursor: grabbing;
    // box-shadow: 0px 10px 15px 5px rgba(0, 0, 0, 0.3);

    .top {
      background-color: #5b8ff9;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
      padding: 10px;
      color: #fff;
      display: flex;
      justify-content: space-between;
    }
    .cn,
    .bottom {
      display: flex;
      padding: 10px;
      box-sizing: border-box;
      justify-content: space-between;
      transform: translateY(-5px);
      background-color: #fff;
      font-size: 12px;
    }
    .cn {
      // z-index: 10;
      position: relative;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;

      justify-content: space-between;
      p {
        padding: 0;
        margin: 0;
      }
      p:nth-child(1) {
        padding-bottom: 5px;
        color: #5b8ff9;
        font-size: 14px;
      }
      p:nth-child(2) {
        color: #86909c;
        font-size: 12px;
      }
    }
    .bottom {
      padding-top: 0;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      .icon {
        margin-right: 10px;
        color: #4e5969;
      }
    }
    .operation {
      position: absolute;
      bottom: -52px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      .operation-all {
        display: flex;
        width: 216px;
        background-color: #fff;
        justify-content: space-around;
        padding: 4px;
        border-radius: 4px;
      }
    }
  }
  .head-line {
    position: relative;
    display: flex;
    justify-content: center;
    // height: 44px;
    // background-color: #6aa1ff;
    width: 100%;
    .bon-line {
      height: 100%;
      width: 1px;
      background-color: #d7d7d7;
    }
  }
  .bottom-line {
    display: flex;
    justify-content: center;
    // height: 44px;
    // background-color: #6aa1ff;
    width: 100%;
    .top-line {
      height: 100%;
      width: 1px;
      background-color: #d7d7d7;
    }
  }
  .duty-mian {
    p {
      padding: 0;
      margin: 0;
    }
    width: 400px;
    z-index: 999;
    position: absolute;
    top: -40px;
    right: -405px;
    // z-index: 10;
    background-color: #fff;
    margin-bottom: 20px;
    .title {
      padding: 10px;
      border-bottom: 1px solid #e4e4e4;
    }
    .user {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        div:nth-child(2) {
          margin-left: 5px;
        }
      }
    }
    .information {
      display: flex;
      // justify-content: space-between;
      padding: 10px;
      div:nth-child(1) {
        width: 100px;
        margin-right: 60px;
      }
      div {
        p {
          margin-bottom: 5px;
          text-align: start;
        }
      }
    }
  }
}
</style>
